const baseConfig = Vue.extend({
    template:
    `<div> <el-form ref="form" :model="form" label-width="130px" class="baseForm">
          <el-form-item label="报表是否自动打印">
            <el-switch v-model="form.autoPrint"></el-switch>
          </el-form-item>
          <el-form-item label="报表生成文件类型">
            <el-radio-group v-model="form.fileType">
                <el-radio label="excel" name="type">Execl</el-radio>
                <el-radio label="PDF" name="type">PDF</el-radio>
             </el-radio-group>
          </el-form-item>
          <el-form-item label="报表生成文件目录">
            <el-input v-model="form.reportFilePath"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
    </div>
    `,
    data() {
        return {
            form: {
                reportFilePath: '',
                autoPrint: false,
                fileType: '',
            }
        }
    },
    props:{

    },
    mounted(){
        this.getBaseConfigDetails();
    },
    methods: {
        onSubmit() {
            console.log(this.form);
            this.baseConfigSave()
        },
        getBaseConfigDetails() {
            $http.get({
                url:api.baseConfigDetails,
                data:{
                    token:this.token,
                },
                success:(result,data)=>{
                    if(data.code == 200) {
                       this.form = data.data
                       this.form.autoPrint = data.data.autoPrint == 'no' ? false : true
                    }
                },
                error:(err)=>{

                }
            },this)
        },
        baseConfigSave() {
           let autoPrint =  this.form.autoPrint ? 'yes' : 'no'
            $http.post({
                url:api.baseConfigSave,
                contentType: 'json',
                data:{
                    token:this.token,
                    ...this.form,
                    autoPrint,
                },
                success:(result,data)=>{
                    if(data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: data.msg
                        });
                        this.getBaseConfigDetails()
                    }
                },
                error:(err)=>{

                }
            },this)
        }
    },
})

const codeTable = Vue.extend({
    template:
        `<div> 
    </div>
    `,
    data() {
        return {

        }
    },
    props:{

    },
    mounted(){
    },
    methods: {

    },
})

const reportPermits = Vue.extend({
    template:
        `<div class="reportPermits"> 
    <el-button
        type="primary"
        @click="handleAdd(null)"
        >添加</el-button
      >
    <el-button
        type="primary"
        @click="save"
        >保存</el-button
      >
      <el-table
        :data="compilationBasisInfoList"
        border
        row-key="ids"
        @cell-dblclick="cellDblClick"
      >
        <el-table-column type="index" label="序号" width="70"  align="center" />
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :show-overflow-tooltip="true"
          align="center"
          :width="item.width ? item.width : ''"
        >
          <template slot-scope="scope">
            <div
              v-if="item.type == 'input'"
              :style="item.textAlign ? 'text-align: left;' : ''"
            >
              <span v-if="!scope.row[item.prop + '$is']" style="cursor: pointer"
                >{{ scope.row[item.prop] }}
              </span>
              <el-input
                v-if="scope.row[item.prop + '$is']"
                v-model="scope.row[item.prop]"
                @blur="
                  cellBlur(scope.row, scope.column, scope.$index, item.prop)
                "
                style="width: 100%"
                :ref="item.prop"
              ></el-input>
            </div>
            <div v-else-if="item.type == 'select'">
              <el-select
                v-model="scope.row[item.prop]"
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in item.selectData && item.selectData()"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                >
                </el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="100"
        >
          <template slot-scope="scope">
            
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row, scope.$index)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    `,
    data() {
        return {
            compilationBasisInfoList: [],
            tableDataCopy: [],
            mergerKeys: ["rbcNum"],
            columns: [
                {
                    prop: "name",
                    label: "姓名",
                    type: "input",
                    width:"300"
                },
                {
                    prop: "templateName",
                    label: "模板名称",
                    type: "input",
                }
            ],
        }
    },
    props:{

    },
    mounted(){
        this.getTableData()
    },
    methods: {
        /**
         * @Author: ybf
         * @LastEditTime:
         * @description: 获取表格数据
         * @return {*}
         */
        getTableData() {
            let  data = [
                {name:'XXX', templateName:''},
                {name:'XXX', templateName:''},
            ]
            this.tableDataCopy = JSON.parse(JSON.stringify(data));
            this.compilationBasisInfoList = data
        },
        //双击修改表格内容
        cellDblClick(row, column) {
            this.compilationBasisInfoList = this.compilationBasisInfoList.filter(
                (item) => {
                    return item;
                }
            );
            this.$set(row, [column.property + "$is"], true);
            this.$nextTick(() => {
                this.$refs[column.property][0].focus(); // 视图出现后使input获取焦点
            });
        },
        // 编辑框失去焦点
        cellBlur(row, column, index, prop) {
            if (row[prop + "-span"]) {
                let k = row[prop + "-span"].rowspan;
                this.compilationBasisInfoList.forEach((item, i) => {
                    if (i >= index && i < index + k) {
                        item[prop] = row[prop];
                    }
                });
            }
            row[column.property + "$is"] = false;
        },
        /** 新增按钮操作 */
        handleAdd(row, index) {
            var o = {
               name:'',
                templateName:''
            };
           this.compilationBasisInfoList.push(o);
        },
        /** 删除按钮操作 */
        handleDelete(row, index) {
            this.$confirm(`是否删除该数据?`, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.compilationBasisInfoList.splice(index, 1);
            });
        },
        // 检测数据是否一致
        compareList(oldList, newList) {
            if (oldList.length != newList.length) {
                this.setIdNull(newList);
                return false;
            }
            for (var i = 0; i < oldList.length; i++) {
                for (let key in oldList[i]) {
                    if (
                        Object.prototype.toString.call(oldList[i][key]) ===
                        "[object Object]"
                    ) {
                        continue;
                    }
                    if (oldList[i][key] != newList[i][key]) {
                        this.setIdNull(newList);
                        return false;
                    }
                }
            }
            return true;
        },
        setIdNull(list) {
            list.forEach(function (e) {
                e.id = null;
            });
        },
        // 保存
        save() {
            let arr = this.tableDataCopy.map((item) => {
                return item.id;
            });
            let flag = this.compareList(
                this.tableDataCopy,
                this.compilationBasisInfoList
            );
            if (!flag) {
                if (this.compilationBasisInfoList.length != 0) {
                }
            } else {
            }
        }
    }
})

// 自定义组件双向数据绑定例子
const testInput = Vue.extend({
    template: `<template>
  <div class="loader1">
    <el-input v-model="text"  @input="handleInput"></el-input>
  </div>
</template>`,
    name: "m-input",
    modal:{
        prop:"value",
        event:'input'
    },
    props :{
        value : {
            type: [String,Number]
        }
    },
    data(){
        return{
            text: this.value
        }
    },
    watch: {
        // text(val) {
        //   this.$emit('change', val)
        // }
    },
    methods: {
        handleInput() {
            this.$emit('input', this.text)
        }
    }
})